import { login, getCode } from '@/store/actions/login'
import { Button, NavBar, Form, Input, List, Toast } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { LoginForm } from '@/types/data'
import styles from './index.module.scss'
import { AxiosError } from 'axios'
import { useHistory } from 'react-router'
import { useRef } from 'react'
import { InputRef } from 'antd-mobile/es/components/input'
const Login = () => {
  const mobileRef = useRef<InputRef>(null)
  const [form] = Form.useForm()
  const history = useHistory()
  const dispatch = useDispatch()
  const Login = async (values: LoginForm) => {
    try {
      await dispatch(login(values))
      Toast.show({
        icon: 'success',
        content: '登录成功',
        duration: 600,
        afterClose: () => {
          // 返回首页
          history.push('/home')
        }
      })
      history.push('/home')
    } catch (err) {
      const e = err as AxiosError<{message:string}>
      Toast.show({
        icon: 'fail',
        content: e.response?.data.message
      })
    }
  }
  const onGetCode = async () => {
    console.log(mobileRef)
    if (form.getFieldError('mobile').length === 0) {
      try {
        const mobile = form.getFieldValue('mobile')
        await dispatch(getCode(mobile))
        console.log(1)
      } catch (err) {
        const e = err as AxiosError<{message:string}>
        Toast.show({
          icon: 'fail',
          content: e.response?.data.message
        })
      }
    } else {
      console.log(mobileRef.current)
      mobileRef.current?.focus()
    }
  }
  return (
    <div className={styles.root}>
      <NavBar />

      <div className="login-form">
        <h2 className="title">账号登录</h2>

        <Form

        form={form}
        initialValues={{ mobile: '13811111111', code: '246810' }}
          onFinish={(values) => {
            Login(values)
          }}>
          <Form.Item
            name="mobile"
            className="login-item"
            rules={[
              { required: true, message: '手机号不能为空' },
              {
                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message: '手机号格式不正确'
              }
            ]}>
            <Input ref={mobileRef} placeholder="请输入手机号" />
          </Form.Item>
          <List.Item
            className="login-code-extra"
            extra={<span className="code-extra" onClick={() => { onGetCode() }}>发送验证码</span>}>
            <Form.Item
              name="code"
              className="login-item"
              rules={[
                { required: true, message: '验证码不能为空' },
                { min: 6, max: 6, message: '验证码为6位数' }
              ]}>
              <Input placeholder="请输入验证码" autoComplete="off" />
            </Form.Item>
          </List.Item>

          <Form.Item noStyle>
            <Button
              block
              type="submit"
              color="primary"
              className="login-submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Login
